<template>
  <div :id="chartId" :style="{ width: chartWidth, height: chartHeight } " @click="handleClick"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    chartId: {
      type: String,
      default: 'lineChart'
    },
    title: {
      type: String,
      default: '标题'
    },
    chartWidth: {
      type: String,
      default: '100%'
    },
    chartHeight: {
      type: String,
      default: '100%'
    },
    label: {
      type: Array,
      default: () => ['A', 'B', 'C']
    },
    labelValue: {
      type: Array,
      default: () => [120, 200, 150]
    },
    visualMapData:{
      type:Array,
      default: () =>[
        {
          color: '#FBDB0F',
          gt: 0,
          lte: 4,
        },
        {
          color: '#93CE07',
          gt: 4,
          lte: 6,
        },
        {
          color: '#ED1C24',
          gt: 6,
          lte: 10,
        },
      ],
    }
  },
  mounted() {
    this.drawLine()
  },
  watch: {
    label: 'handleDataChange',
    labelValue: 'handleDataChange',
    title: 'handleDataChange',
    chartId: 'handleDataChange',
    chartWidth:'handleDataChange',
    chartHeight:'handleDataChange',
    visualMapData:'handleDataChange'

  },
  methods: {
    handleClick() {
      const eventData = {
        title: this.title,
        chartId: this.chartId,
        chartWidth: this.chartWidth,
        chartHeight: this.chartHeight,
        label: this.label,
        labelValue: this.labelValue,
        visualMapData:this.visualMapData
      };
      this.$emit('lineChartClick',eventData);
    },
    drawLine() {
      let zoom=null
      if(this.chartId &&this.chartId.includes('id'))
      {
        zoom=[{startValue: '2014-06-01'}, {type: 'inside'}]
      } else { zoom = null}
      const chart = echarts.init(document.getElementById(this.chartId))
      const option = {
        title: {
          text: this.title
        },
        xAxis: {
          type: 'category',
          data: this.label,
          nameLocation: 'middle',
          axisLabel: {
            // interval: 0, // 设置为 0，表示强制显示所有标签
            formatter: function (value) {
              // 在这里可以自定义标签的显示方式，例如只显示前两个字符
              return value.substring(11, 16);
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: zoom,
        visualMap: {
          top: 10,
          right: 10,
          precision: 1, // 指定小数的精度为2
          pieces: this.visualMapData,
          outOfRange: {
            color: '#999'
          }
        },
        series: [
          {
            data: this.labelValue,
            type: 'line',
            emphasis: {
              focus: 'series', // 设置悬停时的 focus 触发方式为 series
              itemStyle: {
                opacity: 1 // 在悬停时显示点，设置透明度为1
              }
            },
            smooth: true, // 开启平滑曲线
            itemStyle: {
              smoothCurves: {
                algorithm: 'quadratic', // 使用二次平滑曲线算法
                tension: 1,          // 张力参数，数值越大曲线越平滑
                period: 6             // 周期参数，决定平滑的周期性
              },
              opacity: 0 // 初始时隐藏点，设置透明度为0
            },
          }
        ]
      }
      chart.setOption(option)
    },
    handleDataChange() {
      this.drawLine()
    }
  }
}
</script>
